<script setup lang="ts">
defineProps<{}>();

const visible = defineModel<boolean>();
</script>

<template>
  <div
    v-show="visible"
    class="flex-center fixed top-0 left-0 w-full h-full bg-#232526 z-100"
  >
    <div
      class="flex-center absolute top-5 right-5 size-10 bg-white/40 z-10 cursor-pointer hover:bg-white/90 duration-200 rounded-full"
      @click="visible = false"
    >
      <Icon name="Close" class="text-xl!" />
    </div>

    <div>
      <slot />
    </div>
  </div>
</template>
